<template>
  <div class="playlist-detail">
      <div class="pic">
        <van-icon name="arrow-left" @click="goBack" />
        <van-image :src="picUrl" fit="cover" />
      </div>
      <div class="play">
          <div v-if="songId==''">
                <span>播放全部</span>
          </div>
          <div v-else>
             <audio src="songUrl" controls autoplay></audio>
          </div>
      </div>
      <div class="song-list">
        <ul>
            <li v-for="item in songList" :key="item.songid">
                <h4>{{item.songname}}</h4>
                <span>{{item.singer[0].name}}-{{item.albumname}}</span>
            </li>
        </ul>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
    export default {
        data(){
            return{
               songList:[],
               picUrl:"",
               songId:"",
               songUrl:""
            }
        },
        created(){
           this.getData()
        },
        methods:{
            getData(){
                axios.get("/api/songlist",{
                    params:{
                        id:this.$route.params.id
                    }
                })
                .then(res => {
                    console.log(res.data)
                    this.songList=res.data.data.songlist
                    this.picUrl=res.data.data.logo
                })
                .catch(err => {
                    console.error(err)
                })
            },
            goBack(){
                this.$router.go(-1)
            }
        }
}
</script>
<style scoped>
 .pic{
     height: 275px;
     position: relative;
 }
 .van-image{
     height: 275px;
     width: 100%;
 }
 .van-icon{
     position: absolute;
     top: 0;
     left: 0;
     z-index: 999;
     font-size: 40px;
 }
</style>